<template>
  <div class="box">
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in drawdata"
      :key="item.id"
      :label="item.title"
      :value="item.id"
      @click.native="selectThing(item)">  <!--直接添加点击事件  .native后缀必须加 否则不生效-->
    </el-option>
  </el-select> 
 <div
    class="echart"
    id="mychart"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>

  </div>
    
   </template>
   
   <script>
import * as echarts from "echarts";
import {getdata} from '../../../networks/picture.js'
export default {
  data() {
    return {
      drawdata:[],
      value:1,
      num:1,
      myChart: {},
      data:[],
      xData: ["0210", "0211", "0212", "0213", "0214", "0215", "0216"], //横坐标
      y1Data: [1,2,3,4,5,6,7], //特征1
      y2Data: [2,3,4,5,6,7,8], //特征2
      y3Data: [3,4,5,6,7,8,9], //特征3
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  
  mounted() {
    this.getdata();
    this.selectThing();
    // this.initEcharts();
    
  },
  methods: {
    async getdata(){
    await getdata().then(res =>
    {
      this.drawdata=res.data;
    })
  },
    selectThing(){
      this.num=this.value-1;
      
      this.y1Data=this.drawdata[this.num].data[0];
      this.y2Data=this.drawdata[this.num].data[1];
      this.y3Data=this.drawdata[this.num].data[2];
      this.xData=this.drawdata[this.num].time;
      const option = {
        dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
    ],
        xAxis: {
          data: this.xData
        },
        legend: { // 图例
          data: ["特征1", "特征2","特征3"],
          bottom: "0%"
        },
        yAxis: {},
        series: [
          {
            name: "特征1",
            data: this.y1Data,
            type: "line", // 类型设置为折线图
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 16
              }
            }
          },
          {
            name: "特征2",
            data: this.y2Data,
            type: "line", // 类型设置为折线图
            label: {
              show: true,
              position: "bottom",
              textStyle: {
                fontSize: 16
              }
            }
          },
          {
            name: "特征3",
            data: this.y3Data,
            type: "line", // 类型设置为折线图
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 16
              }
            }
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};



   </script>
   
   <style lang='less' scoped>
   .box{
    text-align: center;
   }
   </style>